<template>
    <el-color-picker
        v-model='color'
        :color-format='colorFormat'
        :predefine='predefine'
        :disabled='disabled'
        :size='size'
        :show-alpha='showAlpha'
        :popper-class='popperClass'
        @change='changeThemeColor'
    />
</template>

<script setup name='ThemePicker'>
import { reactive } from 'vue';
import { useStore } from 'vuex';
import { setThemeColor } from '@/lib/theme.js'

const store = useStore();

// eslint-disable-next-line no-undef
const props = defineProps({
    themeModule: {
        type: String,
        default: ''
    },
    // 写入 v-model 的颜色的格式
    colorFormat: {
        type: String,
        default: 'hex' // hsl / hsv / hex / rgb  hex (当 show-alpha 为 false) / rgb (当 show-alpha 为 true)
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 尺寸
    size: {
        type: String,
        default: '' // large / default / small
    },
    showAlpha: {
        type: Boolean,
        default: false
    },
    // ColorPicker 下拉框的类名
    popperClass: {
        type: String,
        default: ''
    },
    // 预定义颜色
    predefine: {
        type: Array,
        default: () => []
    }
})

const state = reactive({
    color: getComputedStyle(document.documentElement).getPropertyValue(
        `--${props.themeModule}`
    )
});
const color = state.color

const changeThemeColor = (color) => {
    // 第一种方案 直接调用设置主题颜色的函数
    // setThemeColor(props.themeModule, color);

    // 第二种放啊 将主题色存储到store中
    store.dispatch('settings/changeMainColor', {themeModule: props.themeModule, color});
};
</script>

<style scoped>

</style>
